<template>
    <div class="index-conntainer">
        <div class="head-card">
            <div class="head-card-content">
                <div class="toolBox">
                    <div class="tool_item">
                        <el-row>
                            <el-button type="primary" color="#283C4F" :icon="Refresh" @click="freashBtn" />
                            <el-button type="success" color="#18A0FF" style="color: #FFF;" @click="showmodel">+
                                添加</el-button>
                            <el-button type="success" color="#71C647" style="color: #FFF;" @click="exportWordTpl"
                                :icon="Export">导出</el-button>
                        </el-row>
                    </div>
                    <div class="tool_itemT">
                        <el-form-item label="" prop="sname" style="width: 150px; margin-right: 10px;">
                            <el-input type="text" v-model="searchval" placeholder="景区名称" />
                        </el-form-item>
                        <el-select v-model="seaddress" clearable placeholder="请选择" prop="inrules"
                            style="width: 100px; margin-right: 10px;">
                            <el-option v-for="item in stadata" :key="item.id" :label="item.name" :value=item.value />
                        </el-select>
                        <el-row>
                            <el-button :icon="Search" circle @click="searchBtn" />
                        </el-row>
                    </div>
                </div>
                <div class="listBox">
                    <el-table :data="tableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)" stripe
                        style="width: 100%" max-height="510" v-loading="loading" ref="multipleTableRef" row-key="id"
                        :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
                        <el-table-column prop="id" label="ID" sortable width="300" />
                        <el-table-column prop="sciencename" label="景区名称" width="300" />
                        <el-table-column label="二维码" width="300">
                            <template #default="scope">
                                <el-image style="width: 100px; height: 80px; padding: 5px;" :src="scope.row.code"
                                    :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[scope.row.code]"
                                    :initial-index="4" fit="cover" preview-teleported="true"/>
                            </template>
                        </el-table-column>
                        <el-table-column prop="state" label="使用状态" width="300" />

                        <el-table-column property="time" label="创建时间" width="300" />
                    </el-table>
                </div>
                <div class="listBox" style="display: none;">
                    <el-table :data="tableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)" stripe
                        style="width: 100%" max-height="510" v-loading="loading" id="tabexcal" ref="multipleTableRef"
                        row-key="id" :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
                        <el-table-column prop="id" label="ID" sortable width="300" />
                        <el-table-column prop="sciencename" label="景区名称" width="300" />
                        <el-table-column label="二维码" width="300">
                            <template #default="scope">
                                <img :src="scope.row.code" width="80" height="80">
                            </template>
                        </el-table-column>
                        <el-table-column prop="state" label="使用状态" width="300" />
                        <el-table-column property="time" label="创建时间" width="300" />
                    </el-table>
                </div>

                <div class="pageBox">
                    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                        :page-sizes="[5, 10, 15, 20, 100]" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total=tableDatalen @size-change="handleSizeChange"
                        :current-page="currentPage4" @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
        <div class="modelbg" v-show="modelshow">
            <div class="modelbox">
                <!-- 弹窗标题 -->
                <div class="model_title">
                    <div>{{ modtitle }}</div>
                    <span @click="closeModel">x</span>
                </div>
                <!-- 弹窗主体 -->
                <div class="model_content">
                    <!-- 添加景区id -->
                    <div class="senidbox">
                        <div>景区名称</div>
                        <el-select v-model="senid" clearable placeholder="请选择" prop="inrules">
                            <el-option v-for="item in sensele" :key="item.id" :label="item.name" :value="String(item.id)" />
                        </el-select>
                    </div>
                    <el-form>
                        <el-form-item label="兑换条数" prop="sname">
                            <el-input type="text" v-model="nums" placeholder="请输入兑换条数" />
                            <div class="grayText"></div>
                        </el-form-item>
                    </el-form>
                    <div class="addBtn">
                        <el-button type="danger" @click="clearParam()">重置</el-button>
                        <el-button type="success" color="#18A0FF" style="color: #FFF;" @click="addbtn" v-show="btnshow">+
                            添加</el-button>
                        <el-button type="success" color="#67C23A" style="color: #FFF;" @click="editup"
                            v-show="btnshows">确认编辑</el-button>
                    </div>
                </div>
            </div>

        </div>
        <el-dialog v-model="centerDialogVisible" title="危险" width="30%" center>
            <span>
                是否删除此景区信息？
            </span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="sureDel()">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
  
<script setup>
import { ref, computed, reactive, onBeforeMount, onBeforeUnmount, shallowRef, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStore } from 'vuex';
import { ArrowLeft, ArrowRight, Check, Delete, Edit, Message, Position, Refresh, Right, Search, Star, TopLeft } from '@element-plus/icons-vue'
// import  { UploadInstance } from 'element-plus'
import { genFileId } from 'element-plus'
import { ElTable } from 'element-plus'


import 'vant/lib/index.css';
import { dataList, listAdd, listdel, listsearch, senList } from '@/api/qrcode';
import { Export, Left, Point } from '@icon-park/vue-next';
// 富文本引入
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'


// 导入依赖
import FileSaver from 'file-saver'
import htmlDocx from "html-docx-js/dist/html-docx"

//模板word导出
let exportWordTpl = () => {
    let contentHtml = document.getElementById("tabexcal").innerHTML
    let cssHTML = `
		    table {
		    width: 100%;
		    table-layout: fixed;
		    margin-top:10px;
		    border: 1px solid #ddd;
		    border-collapse: collapse;
		    }
		    .export-tb .thead td {
		    font-weight: bold;
		    }
		    td {
		    border: 1px solid #ddd;
		    color: #333;
		    text-align: left;
		    padding: 6px 10px;
		    }
            `
    let content = `
    	 	<!DOCTYPE html><html>
            	<head>
	                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	                <style>
	                    ${cssHTML}
	                </style>
	            </head>
	            <body>
	                <table>
                  		${contentHtml}
                	</table>
	            </body>
            </html>`;
    let converted = htmlDocx.asBlob(content);
    FileSaver.saveAs(converted, '二维码兑换.docx');
}


// 分页组件变量
const currentPage4 = ref(1)
const pageSize4 = ref(5)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
// 刷新组件变量
const loading = ref(false)
// 表格/列表数据
const tableData = ref([])
const tableDatalen = ref()


// 活动参数
const ruleFormRef = ref(null)




const senid = ref()
const nums = ref()


// 弹窗操作参数
const modelshow = ref(false);
const btnshow = ref(false)
const btnshows = ref(false)
const modtitle = ref('')
// 删除弹窗操作参数
const centerDialogVisible = ref(false)
// 获取表格复选框id
const multipleTableRef = ref()
let delsta = 0;

// 搜索功能参数
const searchval = ref()
const seaddress = ref()

// 列表数据初始化
function clearParam() {
    senid.value = undefined
    nums.value = undefined
    searchval.value = undefined
    seaddress.value = undefined
}



// // 列表渲染
dataList().then((res) => {
    console.log(res);
    let datas = []
    datas = res.data
    let imgs = ''
    for (let item of datas) {
        if (item.state == 1) {
            item.state = '未使用'
        } else {
            item.state = '已使用'
        }
    }
    console.log(datas);
    // for (let item of datas) {
    //     imgs = item.img.slice(0, 5) + item.img.slice(6)
    //     item.img = item.img.slice(0, 4) + item.img.slice(5)
    // }
    tableData.value = datas
    console.log(tableData.value);
    tableDatalen.value = tableData.value.length

});
const sensele = ref()
senList().then((res) => {
    sensele.value = res.data
    console.log(sensele.value);
})

// 刷新按钮
let freashBtn = () => {
    clearParam()
    console.log(6666);
    loading.value = true;
    setTimeout(() => {
        loading.value = false;
    }, 1000)
    dataList().then((res) => {
        console.log(res);
        let datas = []
        datas = res.data
        let imgs = ''
        // for (let item of datas) {
        //     imgs = item.img.slice(0, 5) + item.img.slice(6)
        //     item.img = item.img.slice(0, 4) + item.img.slice(5)
        //}
        tableData.value = datas
        tableDatalen.value = tableData.value.length
    });
}




// 添加 弹窗操作
let showmodel = () => {
    modtitle.value = '添加'
    console.log(modelshow.value);
    senid.value = ''
    clearParam()
    btnshow.value = true;
    btnshows.value = false;
    if (modelshow.value == true) {
        modelshow.value = false
    } else {
        modelshow.value = true
    }
}


// 确认添加按钮
let addbtn = () => {
    // ruleFormRef.value.validate((valid) => {
    //     console.log(valid);
    //     // 不通过校验
    //     if (!valid) return ElMessage.error('请将内容填写完成后 再进行添加操作！');

    //     if (frontFile.value == '') {
    //         return ElMessage.error('请将图片上传完成后 再进行添加操作！');
    //     }
    // 通过校验
    let addDatas = {
        scienceid: senid.value,
        num: nums.value
    }

    console.log(addDatas);

    if (senid.value != undefined && nums.value != undefined) {
        listAdd(addDatas).then((res) => {
            console.log(res);
            ElNotification({
                title: 'Success',
                message: '添加成功',
                type: 'success',
            })
            modelshow.value = false;
            freashBtn()
        });
        console.log('上传成功');
    } else {
        ElNotification({
            title: 'Error',
            message: '请完善景区信息',
            type: 'error',
        })
    }

    // });
}

// 删除操作（列表删除按钮）
const delid = ref();
let delmodel = (delids) => {
    centerDialogVisible.value = true
    delid.value = delids
    delsta = 1;
    console.log(delsta);
    console.log(delids);
}
let sureDel = () => {
    centerDialogVisible.value = false
    listdel({ id: delid.value }).then((res) => {
        console.log(res);
        if (res.status == 1) {
            ElNotification({
                title: 'Success',
                message: '删除成功',
                type: 'success',
            })
            freashBtn();
        } else {
            ElNotification({
                title: 'Error',
                message: '删除失败，请稍后重试',
                type: 'error',
            })
        }
    })
}
// 弹窗关闭按钮
let closeModel = () => {
    modelshow.value = false
}



// 搜索功能
let searchBtn = () => {
    if (searchval.value != undefined || seaddress.value != undefined) {
        let searchobj = {
            sciencename: searchval.value,
            state: seaddress.value
        }
        listsearch(searchobj).then((res) => {
            if (res.status == 1) {
                console.log(res);
                tableData.value = res.data
                ElNotification({
                    title: 'Success',
                    message: '查找成功',
                    type: 'success',
                })
                loading.value = true;
                setTimeout(() => {
                    loading.value = false;
                }, 1000)
            } else {
                ElNotification({
                    title: 'Error',
                    message: '未查找到信息',
                    type: 'error',
                })
            }
        })
    } else {
        ElNotification({
            title: 'Error',
            message: '请输入搜索内容',
            type: 'error',
        })
    }
}

</script>

<style lang="scss" scoped>
.head-card {
    padding: $base-main-padding;
    background-color: $base-color-white;
}

.toolBox {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tool_item {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.tool_itemT {
    width: 40%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: right;
}


.search_inp {
    border: 1px solid #DCDFE6;
    padding-left: 10px;
    border-radius: 5px;
}

.listBox {
    width: 100%;
    height: 520px;
}

.pageBox {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    // justify-content: space-around;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

// 弹窗样式
.modelbg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba($color: #000000, $alpha: 0.4);
    z-index: 10;

}

.modelbox {
    width: 800px;
    height: 600px;
    background-color: #FFFFFF;
    margin: 10% 30%;
}

.model_title {
    background-color: #283C4F;
    color: #FFFFFF;
    padding: 15px;
    display: flex;
    justify-content: space-between;
}

.model_title>div {
    cursor: default
}

.model_title>span {
    cursor: pointer
}

.model_content {
    width: 90%;
    padding: 20px 0 0 30px;
    margin: 0 5%;
    height: 496px;
    margin-right: 10px;
    // display: flex;
    // align-items: center;
    overflow: scroll;
}

// 输入框样式
.staff_item {
    width: 80%;
    height: 12.5%;
    margin-bottom: 20px;
    display: flex;

}

.staffItem_name {
    width: 10%;
    height: 100%;
    font-size: 15px;
    color: #606266;
    display: flex;
    justify-content: center;
    align-items: center;
}

.staffItem_name>span {
    color: red;
}

.input_staff {
    width: 100%;
    height: 30px;
    border: 1px solid #DCDFE6;
    border-radius: 5px;
    padding: 0 10px;
    margin-top: 10px;
}

.staffBox {
    width: 90%;
    height: 30px;
}

.input_staff>input {
    height: 100%;
    width: calc(100%-10px);
    border: none;
    outline: none;
}

.input_staff>img {
    width: 16px;
    height: 16px;
    transition: 0.2s;
}

.staff_massage {
    font-size: 12px;
    color: #F56C6C;
    display: none;
}

.grayText {
    color: #C6B4AE;
    font-size: 14px;
}

// 图片上传预览样式
.yimgbox {
    height: 100px;
    width: 120px;
    border: 1px solid #EBEBEB;
    display: flex;
    align-items: center;
    justify-content: center;

    margin: -10px 0 20px 70px;
}

.demo-image .block {
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    display: inline-block;
    width: 20%;
    box-sizing: border-box;
    vertical-align: top;
}

.demo-image .block:last-child {
    border-right: none;
}

.demo-image .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.addBtn {
    width: 100%;
    display: flex;
    justify-content: right;
}

.senidbox {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

.senidbox>div {
    margin-right: 12px;
}
</style>
  